<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商大数据管理平台</title>
		<link rel="icon" href="icon.ico">
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="css/dashboard.css">
		<link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css" />
		<!--[if lt IE 9]>
			<script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
	<div id="app">
			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
						<a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
					</div>

					<navbars :acv="bnav"></navbars>

				</div>
			</nav>

			<div class="container-fluid">
				<div class="row">
					<managenav :dsa="'产品管理'"></managenav>
					<div class="col-sm-9 col-sm-offset-3 col-md-offset-2 col-md-10 main">
						<h2 style="color: #0D81F5;"><b>产品管理</b></h2>
						<div style="margin: 10px 0;position: relative;">
							<div class="input-group table-search">
								<input type="text" class="form-control" placeholder="输入产品名称搜索" v-model="searchParams.productName">
								<span class="input-group-btn">
                  <button class="btn btn-default" type="button" @click="getData">搜索</button>
                </span>
							</div>
							<el-table :data="tableData" stripe border style="width: 100%"  @sort-change="sortChange">
								<el-table-column prop="productName" label="产品名称"></el-table-column>
								<el-table-column prop="enumCategoryName" label="产品类别"></el-table-column>
								<el-table-column prop="stockVolume" label="库存"></el-table-column>
								<el-table-column prop="stockUnit" label="单位" ></el-table-column>
								<el-table-column prop="unitPrice" label="销售单价" ></el-table-column>
								<el-table-column prop="businessVolume" label="月交易量" sortable align="center"></el-table-column>
								<el-table-column prop="tradingVolume" sortable label="月交易额" sortable align="center">

								</el-table-column>
								<el-table-column prop="salesArea" label="销往范围" ></el-table-column>
							</el-table>
							<div class="text-center" style="margin: 10px 0;">
								<el-pagination @current-change="handleCurrentChange" :current-page="searchParams.index" :page-size="searchParams.size" layout="total, prev, pager, next, jumper" :total="totalCount">
								</el-pagination>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script src="plugins/element-ui/index.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/common.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					totalCount: 0,
					searchParams: {
						index: "1",
						size: "10",
						productName: "",
						tradeBusinessOrder:"",
					    tradeVolumnOrder:""
					},
					bnav: {
						number: 1,
					},
					tableData: [],
				},
				computed: {

				},
				mounted: function() {
					this.getData();
				},
				methods: {
					getData:function() {
						var vm = this;
						$.ajax({
							type: "get",
							url: "ebb/front/product/allproductinfo/"+
							"?start="+vm.searchParams.index+
							"&size="+vm.searchParams.size+
							"&tradeBusinessOrder="+vm.searchParams.tradeBusinessOrder+
							"&tradeVolumnOrder="+vm.searchParams.tradeVolumnOrder+
							"&productName="+vm.searchParams.productName,
							async: true,
                            dataType: "json",
							success: function(data) {
								vm.totalCount = data.totalCount;
								vm.tableData = data.data;
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("你还没有登录，请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					handleCurrentChange:function(val) {
						this.searchParams.index = val;
						this.getData();
					},
					sortChange:function(column) {
						if(column.prop === "tradingVolume") {
							this.searchParams.tradeVolumnOrder = (this.searchParams.tradeVolumnOrder === "asc") ? "desc" : "asc";
						}else if(column.prop === "businessVolume") {
							this.searchParams.tradeBusinessOrder = (this.searchParams.tradeBusinessOrder === "asc") ? "desc" : "asc";
						}
						this.getData();
					}
				}
			});
		</script>
	</body>

</html>